<template>
  <div class="foot">
    <div class="foot-nav">
      <div @click="vfun_class" :class="{active:vue_index}">
        <em class="iconfont">&#xe6a6;</em>
        小店
      </div>
      <div @click="vfun_order">
        <em class="iconfont badge">&#xe683;</em>
        店铺管理
      </div>
      <div @click="vfun_call" :class="{active:vue_order}">
        <em class="iconfont">&#xe648;</em>
        市场
      </div>
      <div @click="extendBtn" :class="{active:vue_class}">
        <em class="iconfont">&#xe6bb;</em>
        店铺分享
      </div>
    </div>
    <share-out @closeShowBtn="closeShow_share" v-show="shareShow" :closeShare="shareShow"></share-out>
  </div>
</template>

<script>
  import shareOut from '../../components/share/share';
  export default {
    components:{shareOut},
    name: 'footer',
    data () {
      return {
        shareShow:false,   //分享框弹出
        vue_badge_num:0,
        vue_index:false,
        vue_class:false,
        vue_order:false,
        vue_my:false,
      }
    },
    methods:{
      //（关闭）分享弹出框
      closeShow_share(){
        this.shareShow = false;
      },

      //点击单行（推广）按钮
      extendBtn(item,index){
        this.shareShow = true;
      },

      //（点击）小店
      vfun_class(){
        this.$router.push({path:"/shopMine"})
      },

      //（点击）店铺管理
      vfun_order(){
        localStorage.removeItem("orderName");
        this.$router.push({path:"/shopManage"})
      },

      //（点击）市场
      vfun_call(){
        this.$router.push({path:"/goodsCategory"})
      },

    },

    activated(){
      //小店显示默认颜色
      if (this.$route.name=='shopMine') {
        this.vue_index=true;
      }

    },
    mounted(){
      //小店显示默认颜色
      if (this.$route.name=='shopMine') {
        this.vue_index=true;
      }


    }
  }
</script>


<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  .active{
    color: #D50B0A;
  }
  .active em{
    color: #D50B0A;
  }
  .foot{
    position: fixed;
    bottom: 0;
    height: 1.6rem;
    width: 100%;
    color: #888;
    z-index: 100;
    box-shadow: 3px 0px 5px #ccc;
    background: #fff;
    padding-top: 0.1rem;
  }
  .foot-nav{
    display: -webkit-box;
  }
  .foot-nav div{
    -webkit-box-flex: 1;
    text-align: center;
    font-size: 14px;
  }
  .foot-nav div em{
    font-size: 22px;
    display: block;
  }
  /* start 徽章 */

  .badge {
    position: relative;
  }

  .badge>i {
    position: absolute;
    top: 0rem;
    right: .5rem;
    padding: 2px 4px;
    background: red;
    border-radius: 3px;
    font-size: 0.2rem;
    line-height: 1;
    color: #fff;
  }
  /* end 徽章 */
</style>
